<template>
  <el-tree
    class="modelTree"
    :props="props"
    :load="loadNode"
    lazy
    highlight-current
    @node-click="onClick"
  >
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <div>
          <SvgIcon icon-class="ic_吸管" @click="goMaterial($event, data)" />
          <SvgIcon icon-class="ic_复制id" @click="copyId($event, data)" />
          <SvgIcon icon-class="ic_显示" @click="showChange($event, data)" />
        </div>
      </span>
    </template>
  </el-tree>
  <model-detail
    class="modelDetail"
    v-show="activeNode && stageStore.rightVisible"
    :detail="detail"
  />
</template>

<script lang="ts" setup>
import type Node from 'element-plus/es/components/tree/src/model/node';
import ModelDetail from './model-detail.vue';
import { useStageStore } from '@/store/stage';
import { copy } from '@jl/common/utils';
import { getInitModTree, getModeNodeInfo, getModeNodeProp } from '@/api/resource';

const stageStore = useStageStore();
const activeNode = ref<any>({});
const detail = ref<any>([]);

const onClick = (data: any) => {
  if (activeNode.value.nodeId !== data.nodeId) {
    activeNode.value = data;
    getModeNodeProp({
      resId: stageStore.layerData.data.resId,
      resAddre: stageStore.layerData.data.resAddre,
      nodeId: data.nodeId,
    }).then((res: any) => {
      detail.value = res;
    });
  }
};

const props = {
  label: 'nodeName',
  isLeaf: 'leaf',
};

const loadNode = (node: Node, resolve: (data: any) => void) => {
  if (node.level === 0) {
    getInitModTree({
      resId: stageStore.layerData.data.resId,
      resAddre: stageStore.layerData.data.resAddre,
    }).then((response: any) => {
      // 父节点的id只能从子节点的parentId获取 所以多取一层
      getModeNodeInfo({
        resId: stageStore.layerData.data.resId,
        resAddre: stageStore.layerData.data.resAddre,
        nodeIds: response.child.join(),
      }).then((res: any) => {
        resolve([
          {
            ...response,
            nodeName: response.name,
            nodeId: res[0]?.parentId ?? '',
            parentId: null,
            children: res.map((el: any) => ({ ...el, leaf: !el.child.length })),
          },
        ]);
      });
    });
  } else {
    if (node.data.child && node.data.child.length) {
      getModeNodeInfo({
        resId: stageStore.layerData.data.resId,
        resAddre: stageStore.layerData.data.resAddre,
        nodeIds: node.data.child.join(),
      }).then((res: any) => {
        resolve(res.map((el: any) => ({ ...el, leaf: !el.child.length })));
      });
    } else {
      resolve([]);
    }
  }
};

const goMaterial = (e: any, data: any) => {};

const copyId = (e: any, data: any) => {
  e.stopPropagation();
  copy(data.nodeId);
};

const showChange = (e: any, data: any) => {
  e.stopPropagation();
  console.log(data, 90);
  if (!data.parentId) {
    stageStore.updateLayer({
      ...stageStore.layerData,
      data: { ...stageStore.layerData.data, show: !stageStore.layerData.data.show },
    });
  } else {
    stageStore.updateLayer({
      ...stageStore.layerData,
      data: { ...stageStore.layerData.data, hiddenNodes: [] },
    });
  }
};
</script>

<style lang="less" scoped>
.newCss {
  background-color: rgba(5, 96, 253, 0.36);
  border-radius: 4px;
  border: 1px solid #0560fd;
}
.modelTree {
  :deep(.el-tree-node:focus > .el-tree-node__content) {
    background: rgba(5, 96, 253, 0.1);
    &:hover {
      &:extend(.newCss);
    }
  }
  :deep(.el-tree-node.is-current > .el-tree-node__content) {
    &:extend(.newCss);
  }
  :deep(.el-tree-node.is-current:focus > .el-tree-node__content) {
    &:extend(.newCss);
  }
  :deep(.el-tree-node__content) {
    border: 1px solid transparent;
    &:hover {
      &:extend(.newCss);
    }
  }

  .custom-tree-node {
    width: calc(100% - 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    > div {
      display: flex;
      align-items: center;
      .svg-icon {
        font-size: 20px;
      }
    }
  }
}

.modelDetail {
  position: fixed;
  top: 90px;
  right: 300px;
}
</style>
